// 推荐角标组件

import React from 'react';
import './RecommendBadge.css';

interface RecommendBadgeProps {
  /** 推荐类型 */
  recommendType: 'win' | 'draw' | 'lose' | null | undefined;
  /** 当前赔率类型 */
  oddsType: 'win' | 'draw' | 'lose';
  /** 是否显示角标 */
  show?: boolean;
}

/**
 * 推荐角标组件
 * 根据推荐结果在对应的赔率单元格显示推荐标识
 */
const RecommendBadge: React.FC<RecommendBadgeProps> = ({
  recommendType,
  oddsType,
  show = true
}) => {
  // 如果没有推荐或者不显示，则不渲染
  if (!show || !recommendType || recommendType !== oddsType) {
    return null;
  }

  // 根据推荐类型返回对应的角标文本和样式
  const getBadgeConfig = () => {
    switch (recommendType) {
      case 'win':
        return {
          text: '推荐',
          className: 'recommend-badge recommend-badge--win'
        };
      case 'draw':
        return {
          text: '推荐',
          className: 'recommend-badge recommend-badge--draw'
        };
      case 'lose':
        return {
          text: '推荐',
          className: 'recommend-badge recommend-badge--lose'
        };
      default:
        return null;
    }
  };

  const badgeConfig = getBadgeConfig();
  
  if (!badgeConfig) {
    return null;
  }

  return (
    <span className={badgeConfig.className}>
      {badgeConfig.text}
    </span>
  );
};

export default RecommendBadge;